﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>calender</title>

    <link href="../../Css/def_calender.css" rel="stylesheet" />
    <!--<script src='jquery.js'></script>-->
    <script src="../../Js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <ul id="calender"></ul>
    <div class="btn_load_show" id="btnLoadAll">---------------------v-----------------------</div>
    <div class="btn_load_hidden" id="btnLoadWeek">---------------------^-----------------------</div>
    <script>

        //清空元素
        function clearCalender() {
            document.getElementById('calender').innerHTML = "";
        }

        function OneMonthCalender() {
            clearCalender();

            var curToday = new Date();
            var TodayDay = curToday.getDate();
            var month = curToday.getMonth();
            var year = curToday.getFullYear();

            var Today = new Date(year, month, 1);

            TodayDay = Today.getDate();
            month = Today.getMonth();
            year = Today.getFullYear();
            //获取最大天数
            var mostDay = new Date(+year, +month + 1, 0).getDate();
            var dateArr = [];
            var distance = mostDay - 1;
            var thisWeeKDay = Today.getDay(); //星期
            var left = mostDay - distance;
            commonCalender(distance, left, Today);
        }

        function OneWeekCalender() {
            clearCalender();
            var curToday = new Date();
            var TodayDay = curToday.getDate();
            var month = curToday.getMonth();
            var year = curToday.getFullYear();
            var dateArr = [];

            var thisWeeKDay = curToday.getDay(); //星期
            var interval = thisWeeKDay == 0 ? 6 : (thisWeeKDay - 1);


            //获取最大天数
            var mostDay = 0;
            var Today = new Date();
            if (TodayDay - interval > 0) //判断本周第一天是否在当前月
            {
                //本月 curMostDay
                mostDay = new Date(+year, +month + 1, 0).getDate();
                Today = new Date(year, month, (TodayDay - interval));
            } else {
                //上个月 preMostDay

                mostDay = new Date(+year, +month, 0).getDate();
                Today = new Date(year, month - 1, (mostDay + TodayDay - interval));

            }

            TodayDay = Today.getDate();
            month = Today.getMonth();
            year = Today.getFullYear();
            thisWeeKDay = Today.getDay(); //星期

            var distance = 6;

            var left = 7 - distance;
            commonCalender(distance, left, Today);
        }

        function TwoWeekCalender() {
            var Today = new Date('2020-03-01');
            var TodayDay = Today.getDate();
            var month = Today.getMonth();
            var year = Today.getFullYear();
            //获取最大天数
            var mostDay = new Date(+year, +month + 1, 0).getDate();
            var distance = mostDay - TodayDay;
            var left = 14 - distance;

            commonCalender(distance, left, Today);
        }

        function commonCalender(distance, left, date) {
            var dateArr = [];
            var i = 0;
            month = date.getMonth();
            year = date.getFullYear();
            TodayDay = date.getDate();
            var thisWeeKDay = date.getDay(); //星期
            var dif = thisWeeKDay == 0 ? 7 : thisWeeKDay;
            for (i = 1; i < dif; i++) {
                dateArr.push('whiteSpace');
            }
            for (i = 0; i <= distance; i++) {
                dateArr.push({
                    Day: TodayDay++
                })
            }
            if (month == 11) {
                month = -1;
                year++;
            };
            for (i = 1; i < left; i++) {
                dateArr.push({
                    Day: year + '-' + (+month + 2) + '-' + i
                })
            };
            var calender_html = '<li><a javascript:void()>一</a><a javascript:void()>二</a><a javascript:void()>三</a><a javascript:void()>四</a><a javascript:void()>五</a><a javascript:void()>六</a><a javascript:void()>日</a></li><li>';
            dateArr.forEach(function (item, i) {
                if (i !== 0 && i % 7 == 0) {
                    calender_html += '</li><li>'
                }
                calender_html += item === 'whiteSpace' ? '<a javascript:void()></a>' : '<a javascript:void()>' + item.Day + '</a>';
            })
            calender_html += '</li>';
            document.getElementById('calender').innerHTML = calender_html;
        }

        OneWeekCalender()

        $('#btnLoadAll').click(function () {
            $(this).removeClass('btn_load_show').addClass('btn_load_hidden');
            $('#btnLoadWeek').removeClass('btn_load_hidden').addClass('btn_load_show');
            OneMonthCalender();

        });

        $('#btnLoadWeek').click(function () {
            $(this).removeClass('btn_load_show').addClass('btn_load_hidden');
            $('#btnLoadAll').removeClass('btn_load_hidden').addClass('btn_load_show');
            OneWeekCalender();
        });
    </script>
</body>
</html>